<template>
    <div>
      <el-card>
          <!--查询添加-->
          <el-row>
                <el-col :span="8">
                  <el-input placeholder="请输入内容" clearable v-model="queryString" class="input-with-select" @clear="findPage">
                    <el-button slot="append" icon="el-icon-search" @click="findPage"/>
                  </el-input>
                </el-col>
          </el-row>
            <!--列表-->
          <el-table :data="tableList" stripe  :tree-props="{children: 'children', hasChildren: 'hasChildren'}"  row-key="id" >
                <el-table-column type="index" label="序号" />
                <el-table-column prop="position" label="位置" />
                <el-table-column prop="content" label="反馈内容" />
            <el-table-column fixed="right" label="操作" width="180">
              <template slot-scope="scope">
                <el-button type="danger" @click="deleteById(scope.row.id)"   size="small"  icon="el-icon-delete" circle/>
              </template>
            </el-table-column>
          </el-table>
            <!--底部分页条-->
          <el-pagination
            @size-change="handlePageSize"
            @current-change="handlePageNumber"
            :current-page="currentPage4"
            :page-sizes="[7, 25, 50, 100]"
            :page-size="queryInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"/>
  
          </el-card>
    </div>
  </template>
  
  <script>
  export default {
    data(){
      return {
              queryInfo: {
                //页码
                pageNumber: 1,
                //页数
                pageSize: 7,
                //关键字
                queryString: ""
             },
             queryString:"",
              //表格数据
              tableList:[],
              //总记录数
              total: 0,
              currentPage4: 1,
      }
    },
    methods:{
        findPage(){
            this.queryInfo.queryString = this.queryString + "::course"
            this.$ajax.post("/feedback/findPage", this.queryInfo).then((res)=>{
                this.tableList = res.data.rows;
                this.total = res.data.total;
                console.log(res);
            });
        },
        preview(src){
              let arr = [];
              arr.push(src);
              return arr;
          },
          /*删除用户信息*/
        deleteById(id){
            this.$confirm('您将永久删除id是{' + id +' }的用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //调用后端删除用户接口
                this.$ajax.delete(`/feedback/delete/${id}`).then(res => {
                    this.$message.success(res.data.message);
                    this.queryInfo.pageNumber = 1;
                    this.findPage();
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
         /*页面改变事件*/
         handlePageNumber(newPageNumber){
            //将分页的新数据的参数传递给后端查询
            this.queryInfo.pageNumber = newPageNumber;
            //调分页方法
            this.findPage();
        },
        handlePageSize(newPageSize){
            this.queryInfo.pageSize = newPageSize;
            this.findPage();
        },
    },
    created(){
      this.findPage();
    }
  }
  </script>
  
  <style>
  
  </style>